<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Histroy</title>
    <style>
        .box1{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height:100%;
            background-color: rgba(127, 255, 253,.5);
        }
        .box2{
            position: fixed;
            
            margin-top: 10px;
            margin-left: 120px;
            margin-right: 10px;
            margin-bottom: 10px;
            width: 80%;
            height: 95%;
            background-color: rgb(253, 255, 205);

        }
        .box2 img {
            width: 40px;
            height:40px;
            margin-bottom:7px;
        }
        .box2 .box2_exit {
            position: relative;
            top: 10px;
            left: 20px;
        }
        .box2 .box2_title{
        position: relative;
        top: -5px;
        left: 405px;
        font-style: normal;
        font-size: 36px;

    }
    table{
    width: 100%;
    border-collapse: collapse;
    }

    table caption{
        font-size: 2em;
        font-weight: bold;
        margin: 1em 0;
    }

    th,td{
        border: 1px solid #999;
        text-align: center;
        padding: 20px 0;
    }

    table thead tr{
        background-color: #778c00;
        color: #fff;
    }

    table tbody tr:nth-child(odd){
        background-color: #eee;
    }

    table tbody tr:hover{
        background-color: #ccc;
    }

    table tbody tr td:first-child{
        color: #f40;
    }

    table tfoot tr td{
        text-align: right;
        padding-right: 20px;
}

    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div>
                <img src="./images/退出.png" class="box2_exit"/>
                <a class="box2_title"><b>历史足迹</b></a>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>类别</th>
                        <th>地址</th>
                        <th>观看时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                      <td>ABC</td>
                      <td>儿歌</td>
                      <td>http://xxxxxxxxxxxxxxxxxxx</td>
                      <td>17:23</td>
                      <td><button class="btn" href="#">删除</button></td>
                    </tr>
                    <tr>
                      <td>color</td>
                      <td>儿歌</td>
                      <td>http://xxxxxxxxxxxxxxxxxxx</td>
                      <td>16:29</td>
                      <td><button class="btn" href="#">删除</button></td>
                    </tr>
                    <tr>
                      <td>幼儿语法练练</td>
                      <td>课程</td>
                      <td>http://xxxxxxxxxxxxxxxxxxx</td>
                      <td>14:29</td>
                      <td><button class="btn" href="#">删除</button></td>
                    </tr>
                    <tr>
                      <td>Cat</td>
                      <td>绘本</td>
                      <td>http://xxxxxxxxxxxxxxxxxxx</td>
                      <td>13:43</td>
                      <td><button class="btn" href="#">删除</button></td>
                    </tr>
                    <tr>
                      <td>Best Friends</td>
                      <td>绘本</td>
                      <td>http://xxxxxxxxxxxxxxxxxxx</td>
                      <td>13:40</td>
                      <td><button class="btn" href="#">删除</button></td>
                    </tr>
                    <tr>
                      <td>Friends</td>
                      <td>视频</td>
                      <td>http://xxxxxxxxxxxxxxxxxxx</td>
                      <td>11:50</td>
                      <td><button class="btn" href="#">删除</button></td>
                    </tr>
                    
                  </tbody>
            </table>
        </div>
    </div>
</body>
</html>